<template>
  <div>
    <public-modal
      width="1200px"
      :footer="false"
      :title="title"
      modalStyle="visitor-detailModal"
      :publicVisible="publicVisible"
      @handleOk="handleOk"
      @cancel="cancel"
    >
      <div slot="content">
        <div class="content-wrap">
          <div class="header flex">
            <img src="@/assets/imgs/event/icon.png" alt="" />
            <div class="header-right flex column justify-around">
              <div class="restaurant-name">{{ records.restaurantName }}-{{ ' ' + records.deviceName }}</div>
              <div class="mn">
                MN码:
                <span class="MN-number">{{ records.deviceMonitorMn }}</span>
              </div>
            </div>
          </div>
          <div class="detail-info">
            <div class="detail-info-common flex">
              <div class="f1 flex">
                <div class="detail-info-lable">所属餐厅：</div>
                <div class="detail-info-value">{{ records.restaurantName }}</div>
              </div>
              <div class="f1 flex">
                <div class="detail-info-lable">所属街道：</div>
                <div class="detail-info-value">{{ records.regionName }}</div>
              </div>
              <div class="f1 flex">
                <div class="detail-info-lable">监管单位：</div>
                <div class="detail-info-value">{{ records.unitName }}</div>
              </div>
            </div>
            <div class="detail-info-common flex">
              <div class="f1 flex">
                <div class="detail-info-lable">餐厅规模：</div>
                <div class="detail-info-value">
                  {{ records.restaurantScale == 1 ? '小型' : records.restaurantScale == 2 ? '中型' : '大型' }}
                </div>
              </div>
              <div class="f1 flex">
                <div class="detail-info-lable">餐厅负责人：</div>
                <div class="detail-info-value">{{ records.restaurantChargeName }}</div>
              </div>
              <div class="f1 flex">
                <div class="detail-info-lable">负责人电话：</div>
                <div class="detail-info-value">{{ records.restaurantChargePhone }}</div>
              </div>
            </div>
            <div class="detail-info-common flex">
              <div class="f1 flex">
                <div class="detail-info-lable">清洗周期(天)：</div>
                <div class="detail-info-value">{{ records.restaurantCleanCycle }}</div>
              </div>
              <div class="f1 flex">
                <div class="detail-info-lable">最近一次清洗时间：</div>
                <div class="detail-info-value">{{ records.cleanTime.split(' ')[0] }}</div>
              </div>
              <div class="f1 flex">
                <div class="detail-info-lable">清洗倒计时：</div>
                <div class="detail-info-value" v-if="records.downCleanDay > 0">{{ records.downCleanDay }}天</div>
                <div class="detail-info-value" v-else style="color: #ff517b">逾期{{ records.downCleanDay * -1 }}天</div>
              </div>
            </div>
            <div class="detail-info-common flex">
              <div class="f1 flex">
                <div class="detail-info-lable">营业地址：</div>
                <div class="detail-info-value">{{ records.restaurantAddress }}</div>
              </div>
            </div>
          </div>

          <div class="detail-info" v-if="type == 1">
            <div class="alter-container flex align-center">工单详情</div>
            <div class="detail-info-common flex">
              <div class="f1 flex">
                <div class="detail-info-lable">工单下发时间:</div>
                <div class="detail-info-value">{{ records.createTime }}</div>
              </div>
              <div class="f1 flex">
                <div class="detail-info-lable">累计告警时间:</div>
                <div class="detail-info-value">{{ getTime(records.durationDate) }}</div>
              </div>
              <div class="f1 flex">
                <div class="detail-info-lable">告警记录:</div>
                <div class="detail-info-value cursor" style="color: #05b881" @click="showInfoDetail">查看</div>
              </div>
            </div>
          </div>

          <div class="detail-info" v-if="type == 2">
            <div class="alter-container flex align-center">工单详情</div>
            <div class="detail-info-common flex">
              <div class="f1 flex">
                <div class="detail-info-lable">工单下发时间:</div>
                <div class="detail-info-value">{{ records.createTime }}</div>
              </div>
              <div class="f1 flex">
                <div class="detail-info-lable">累计离线时间:</div>
                <div class="detail-info-value">{{ getTime(records.durationDate) }}</div>
              </div>
              <div class="f1 flex">
                <div class="detail-info-lable">离线记录:</div>
                <div class="detail-info-value cursor" style="color: #05b881" @click="showInfoDetail">查看</div>
              </div>
            </div>
          </div>

          <div class="detail-info">
            <div class="alter-container flex align-center">核查详情</div>
            <div class="detail-info-common flex">
              <div class="f1 flex">
                <div class="detail-info-lable">核查时间:</div>
                <div class="detail-info-value">{{ records.handleTime || '暂无' }}</div>
              </div>
              <div class="f1 flex">
                <div class="detail-info-lable">核查单位:</div>
                <div class="detail-info-value">{{ records.unitName || '暂无' }}</div>
              </div>
              <div class="f1 flex">
                <div class="detail-info-lable">核查城管:</div>
                <div class="detail-info-value cursor">{{ records.policeUserName || '暂无' }}</div>
              </div>
            </div>
          </div>

          <div class="detail-info">
            <div class="detail-info-common flex">
              <div class="f1 flex">
                <div class="detail-info-lable">处理建议:</div>
                <div class="detail-info-value cursor">{{ records.handleDesc || '暂无' }}</div>
              </div>
            </div>
          </div>

          <div class="detail-info">
            <div class="detail-info-common flex">
              <img
                style="max-width: 340px"
                v-for="(i, index) in examineImgList"
                :key="index"
                :src="`${imgPrefix + i.path}`"
                :id="'idimg' + i.path"
                alt=""
              />
            </div>
          </div>
        </div>
      </div>
      <div slot="footer"></div>
    </public-modal>
    <info-detail ref="infoDetail"></info-detail>
  </div>
</template>
<script>
import { getAction } from '@/api/manage'
import publicModal from '@/components/publicModal'
import infoDetail from '../../modules/infoDetail'
import { comMethods } from '@/mixins/comMethods'

export default {
  name: 'cancelModel',
  mixins: [comMethods],
  components: { publicModal, infoDetail },
  data() {
    return {
      type: '',
      title: '',
      records: {},
      imgPrefix: '',
      examineImgList: [],
      publicVisible: false,
    }
  },
  mounted() {},
  methods: {
    async show(records, type) {
      this.type = type
      this.records = records
      if (type == 1) {
        this.title = '已处理告警超时工单'
      } else if (type == 2) {
        this.title = '已处理离线超时工单'
      }
      let { result } = await getAction('/sys/images_path/list', { bizId: records.id, bizType: 4 })
      this.examineImgList = result
      this.publicVisible = true
    },

    showInfoDetail() {
      this.$refs.infoDetail.show(this.records, this.type + 1, this.records.createTime.split(' ')[0])
    },

    getTime(value) {
      if (value !== 0) {
        let secondTime = parseInt(value) // 秒
        let minuteTime = 0 // 分
        let hourTime = 0 // 小时
        if (secondTime > 60) {
          // 如果秒数大于60，将秒数转换成整数
          // 获取分钟，除以60取整数，得到整数分钟
          minuteTime = parseInt(secondTime / 60)
          // 获取秒数，秒数取佘，得到整数秒数
          secondTime = parseInt(secondTime % 60)
          // 如果分钟大于60，将分钟转换成小时
          if (minuteTime > 60) {
            // 获取小时，获取分钟除以60，得到整数小时
            hourTime = parseInt(minuteTime / 60)
            // 获取小时后取佘的分，获取分钟除以60取佘的分
            minuteTime = parseInt(minuteTime % 60)
          }
        }
        let result
        // 秒数为0返回空
        if (secondTime > 0) {
          result = '' + parseInt(secondTime) + '秒'
        } else {
          result = ''
        }
        if (minuteTime > 0) {
          result = '' + parseInt(minuteTime) + '分' + result
        }
        if (hourTime > 0) {
          result = '' + parseInt(hourTime) + '时' + result
        }
        return result
      } else {
        return '0秒'
      }
    },

    cancel() {
      this.publicVisible = false
    },
    handleOk() {},
  },
}
</script>
<style lang="less">
.visitor-detailModal {
  .content-wrap {
    width: 1200px;
    height: 90%;
    margin: 0 auto;
    overflow: hidden;
    background: #024c4e;
    padding: 40px 50px;

    .header {
      padding-bottom: 20px;
      border-bottom: 2px solid #05585a;
      margin-bottom: 20px;
      .header-right {
        margin-left: 5px;
      }
      .restaurant-name {
        font-size: 18px;
        line-height: 18px;
        font-weight: 500;
        color: #85fcff;
      }
      .mn {
        font-size: 14px;
        font-weight: 400;
        color: #06d6db;
        line-height: 14px;
      }
    }

    .alter-container {
      height: 40px;
      margin-left: 60px;
      margin-bottom: 20px;
      padding-left: 14px;
      background: #03585b;

      font-size: 14px;
      font-weight: 500;
      color: #51bfbd;
    }

    .detail-info-common {
      padding-left: 60px;
      font-size: 14px;
      font-weight: 400;
      color: #02c1c7;
      margin-bottom: 20px;
      .detail-info-value {
        color: #9cfdff;
        margin-left: 5px;
      }

      img {
        flex: 1;
        width: 240px;
        height: 160px;
        margin-right: 10px;
        &:last-child {
          margin-right: 0;
        }
      }
    }
  }
}
</style>
